<!--vue模板-->
<template>
  <div class="login_root">

     <!--登录界面-->
     <div class="login">
            <!--title-->
            <div class="title">ERP管理系统</div>
            <div style="height:220px; text-align: center;">

                 <div style="margin-top:40px;">
                  <span class="label">用户名：</span><el-input placeholder="请输入用户名" v-model="user.account"></el-input>
                 </div>

                 <div style="margin-top:40px;">
                <span class="label">密&nbsp;&nbsp;&nbsp;码：</span><el-input placeholder="请输入密码" type="password" v-model="user.password"></el-input>
                </div>
            </div>

            <!--登录按钮-->
            <div class="btn" @click="login">登录</div>
     </div>

  </div>
</template>

<!--vue 组件选项定义-->
<script>
   export default{
       data(){
         return {
             user:{
              account:"admin",
              password:"123456"
             }
         }
       },
       methods:{
          login(){
               this.$http.post("/api/user/login",this.user)
               .then(res=>{
                   if(res.code===200){
                      //将登录信息存储到本地
                      sessionStorage.setItem("erpuser",JSON.stringify(res.result));
                      //跳转到主页页面
                      this.$router.push("/home");

                   }
               })
          }
       }
   }
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
  .login_root{
    width: 100vw;
    height:100vh;
    background-image:url("../../assets/images/bg.jpg");
    border: #fff solid 1px;
  }

  .login{
    width: 600px;
    height: 400px;
    background-color: #fff;
    margin: auto;
    margin-top: 200px;
    border-radius: 10px;
  }

  .title{
     text-align: center;
     height: 80px;
     line-height: 80px;
     font-size: 36px;

  }

  .btn{
    width: 200px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #f00;
    color: #fff;
    margin: auto;
    border-radius: 15px;
    cursor: pointer;
  }

  .el-input {
    width: 60%;
  }
  .label{
    margin: 0 20px;
  }
</style>
